<template>
	<div class="article">
		
		<el-col :span="24" offset="5">
		<div class="info" style="
        overflow: hidden;
        margin-bottom: 20px;
        padding: 20px;
        background: #fff;
        box-shadow: 0 2px 5px 0 hsla(0, 0%, 57%, 0.1);
        transition: all 0.6s ease;
        width: 75%;
      ">
				<div class="article-title" style="
          margin-bottom: 15px;
          font-weight: 700;
          font-size: 18px;
          cursor: pointer;
        ">
					{{ achievement && achievement.name }}
				</div>

			<div class="article-content" v-html="brief"></div>
			<div>
			<el-carousel type="card" v-if="this.achievement.videos">
				<el-carousel-item v-for="(item,index) in this.achievement.videos" :key="item">
					<video-player v-if="item.url"
						class="video-player vjs-custom-skin"
						ref="videoPlayer"
						:playsinline="true"
						:options="playerOptions[index]"
				></video-player>
				</el-carousel-item>
			</el-carousel>
			</div>
				<div class="article-cover" v-if="achievement.cover">
					<img :src="achievement.cover" alt="这是封面"
					style="width: auto;height: auto;max-width: 80%;max-height: 80%; "/>
				</div>
				<div class="article-cover "  v-if="achievement.certificate_picture">
					<span>获奖证书</span><br>
					<img :src="achievement.certificate_picture" alt="这是证书图片"
					style="width: auto;height: auto;max-width: 80%;max-height: 80%; "/>
				</div>
			<el-collapse v-model="activeNames" @change="handleChange">
				<el-collapse-item title="成果介绍" name="1">
					<div v-html="achievement.intro"></div>
				</el-collapse-item>
				<el-collapse-item title="相关文件" name="2">
					<div v-for="(item,index) in achievement.files" :key="index">
						<el-button type="text" @click="handleFilePreview(item)">{{item.name}}</el-button></div>
				</el-collapse-item>
			</el-collapse>
		</div>
		
		</el-col>

		<el-drawer :visible.sync="drawer"
				title="预览"
				direction="rtl"
				size="50%">
				<iframe v-if="fileUrl!=''" :src="fileUrl"  width="100%" height="100%" border="0"></iframe>
			</el-drawer>
	</div>
	
</template>

<script>
	// require styles
	import 'video.js/dist/video-js.css'
	import 'vue-video-player/src/custom-theme.css'
	import {videoPlayer} from 'vue-video-player'
	
	export default {
		components: {
			videoPlayer
		},
		props: {
			id: {}
		},
		data() {
			return {
				achievement: {},
				playerOptions: [],
				drawer:false,
			}
		},
		methods:{
			async fetch() {
				const res = await this.$http.get(`rest/achievement/${this.id}`)
				this.achievement = res.data
				
				this.achievement.match_date = this.dateToString(this.achievement.match_date)
				this.achievement.award_date = this.dateToString(this.achievement.award_date)
				
				for(var i=0;i<this.achievement.videos.length;i++){
					this.playerOptions[i] = {
					// videojs options
					muted: true,
					language: 'zh-CN',
					aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
					playbackRates: [0.75, 1.0, 1.25, 1.5, 2.0],
					sources: [{
						type: "video/mp4",
						src:  this.achievement.videos[i].url //动态更改流地址
					}],
					poster: "/static/images/author.jpg",
					notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
					controlBar: {
						timeDivider: true, // 当前时间和持续时间的分隔符
						durationDisplay: true, // 显示持续时间
						remainingTimeDisplay: false, // 是否显示剩余时间功能
						fullscreenToggle: true // 是否显示全屏按钮
					}
				}
					console.log(this.achievement.videos[i])
				}
				
			},
			dateToString(date){
				const d = new Date(date)
				const year = d.getFullYear()
				const month = d.getMonth()+1
				const day = d.getDate()
				return year+'-'+month+'-'+day
			},
			handleFilePreview(file) {
				let size = file.size / 1024 /1024 > 25?'1':'0';
				if(size==0){
					this.drawer = true
					this.fileUrl = 'http://view.officeapps.live.com/op/view.aspx?src='+file.url
				}
				console.log(file.url)
			},
		},
		created() {
			this.id && this.fetch()
		}
	};
</script>

<style>
	.article {
		display: flex;
		padding: 10px 0;
		/*border-bottom: 1px solid #dbdbdb;*/
	}

	.article-title {
		font-size: 16px;
		font-weight: 500;
		color: #000000;
		text-align: justify;
	}

	.article-time {
		/*margin: 10px 0;*/
		color: #c5c5c5;
	}

	.article-content,
	.article-author,
	.article-category,
	.article-view,
	.article-time {
		font-size: 13px;
		color: #999;
	}

	.article-cover {
		flex: none;
		
	}

	.el-carousel {
        width: 100%;
        height: 100%;
    }
 

	.video-player {
            width:100%;
            height:100%;
            position: fixed;
            display: inline-block;
            vertical-align: baseline;
            object-fit: fill;
			margin:0 auto;
    }
</style>
